<script setup>
import scroller from '@/components/scroller.vue'
import { ref, onMounted } from 'vue'
import * as THREE from 'three'
import * as TWEEN from 'tween'
import OrbitControls from 'three-orbitcontrols'
import route from '@/assets/img/router.jpg'
const scene = new THREE.Scene()
let controls = ''
let render = ''
let camera = ''
let material = ''
let texture = ''
let textureLoad = new THREE.TextureLoader()
let controllerUpdate = ref(true);

// console.log(util.imgUrl('router'))
//初始化场景
const init = () => {
  camera = new THREE.PerspectiveCamera(
    70,
    window.innerWidth / window.innerHeight,
    1,
    5000
  )
  render = new THREE.WebGLRenderer({
    antialias: true,
  })
  render.setPixelRatio(window.devicePixelRatio)
  // let helper = new THREE.AxesHelper(900)
  // scene.add(helper)
  render.setPixelRatio(window.devicePixelRatio) //设置设备像素比。通常用于避免HiDPI设备上绘图模糊
  render.setSize(window.innerWidth, window.innerHeight) //设置THREE场景大小为整个页面
  let app = document.getElementById('threedemo')
  app.appendChild(render.domElement) //添加场景到DOM中
  // var axesHelper = new THREE.AxesHelper(250);
  // scene.add(axesHelper);
  //创建控件对象
  initControls()
  circle()
  window.addEventListener('resize', resize, false)
}
//球体
const circle = () => {
  material = new THREE.MeshBasicMaterial()
  meshTexture(route)
  let skyBox = new THREE.Mesh(
    new THREE.SphereBufferGeometry(100, 100, 100),
    material
  )
  skyBox.geometry.scale(1, 1, -1)
  // var axisHelper = new THREE.AxisHelper(600)
  // scene.add(axisHelper)
  scene.add(skyBox)
}

const animateMove = () => {
  controls.target = new THREE.Vector3(0, 0, -20)
  controllerUpdate.value = false;
  controls.enabled = false

  let position = { y: 300 }
  let l = { x: 0, y: 0, z: 0 }
  
  //旋转动画
  let tween2 = new TWEEN.Tween(l).to({
    x: 0, y: 0, z: -20
  }, 3000).easing(TWEEN.Easing.Sinusoidal.InOut).onUpdate(function () {
    camera.lookAt(l.x, l.y, l.z)
  }).onComplete(function () {
    controllerUpdate.value = true
    controls.enabled = true
  }).start();

  //进入动画
  let tween1 = new TWEEN.Tween(position).to({
    y: 0,
  }, 3000).easing(TWEEN.Easing.Sinusoidal.InOut).onUpdate(function () {
    camera.position.y = position.y
    camera.rotateZ(position.y / 120)
  }).start()
}

//切换纹理
const meshTexture = (imgUrl) => {
  console.log(imgUrl)
  texture = textureLoad.load(imgUrl)
  texture.minFilter = THREE.NearestFilter //当一个纹素覆盖小于一个像素时，贴图将如何采样
  material.map = texture
  animateMove()
}

//初始化控制器
const initControls = () => {
  controls = new OrbitControls(camera, render.domElement)
  controls.target = new THREE.Vector3(0, 0, 0)
  controls.minDistance = 18 // 相机最近
  controls.maxDistance = 100 // 相机最远
  controls.autoRotate = true // 图片自动旋转
  controls.enableDamping = true // 使动画循环使用时阻尼或自转 意思是否有惯性
  controls.enablePan = false // 是否开启右键拖拽
  controls.enableZoom = true //滚轮缩放
  controls.autoRotateSpeed = 0.5 // 阻尼系数
}

//动画循环
const animate = () => {
  if (controllerUpdate.value) {
    controls.update()
  }
  TWEEN.update();
  render.render(scene, camera)
  window.requestAnimationFrame(animate)
}

const resize = () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  render.setSize(window.innerWidth, window.innerHeight)
}

onMounted(() => {
  init()
  animate()
})
</script>

<template>
  <div class="switchLine">
    <scroller @switchcene="meshTexture" :controlls="controllerUpdate"></scroller>
  </div>

  <div id="threedemo"></div>
</template>

<style scoped>
a {
  color: #42b983;
}

.switchLine {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 30px;
  width: 100%;
}
</style>
